<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入图标的css代码 -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <!-- 引入图标的js代码 -->
    <script src="../font/iconfont.js"></script>
    <!-- js -->
    <script src="../js/index.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header class="g-topbar">
        <div class="m-top">
            <div class="content">
                <a href="#" class="logo">
                </a>
                <ul class="m-nav">
                    <li class="deepblack">
                        <span>
                            <a href="javascript:;">
                                <em>发现音乐</em>
                                <!-- 这个是用来做一个三角形 -->
                                <span style="display: block;" class="triangle">&nbsp;</span>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <em>我的音乐</em>
                                <span class="triangle">&nbsp;</span>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <em>朋友</em>
                                <span class="triangle">&nbsp;</span>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <em>商城</em>
                                <span class="triangle">&nbsp;</span>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <em>音乐人</em>
                                <span class="triangle">&nbsp;</span>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="javascript:;">
                                <em>下载客户端</em>
                                <span class="triangle">&nbsp;</span>
                            </a>
                        </span>
                        <sup class="hot">&nbsp;</sup>
                    </li>
                </ul>
                <div class="m-tophead">
                    <a href="javascript:;" class="link">登录</a>
                    <img class="userjpg" src="#" alt="">
                    <div class="userbox">
                        <div class="userbox-tri"></div>
                        <div class="userbox-bg"></div>
                        <div class="user-top">
                            <div class="self-page">
                                <span class="iconfont icon-geren"></span>
                                <span class="sp-text">个人主页</span>
                            </div>
                            <div class="self-vip">
                                <span class="iconfont icon-VIP"></span>
                                <span class="sp-text">VIP会员</span>
                            </div>
                            <div class="self-rank">
                                <span class="iconfont icon-dengji"></span>
                                <span class="sp-text">我的等级</span>
                            </div>
                            <div class="self-message">
                                <span class="iconfont icon-xinxi"></span>
                                <span class="sp-text">我的信息</span>
                            </div>
                            <div class="self-set">
                                <span class="iconfont icon-shezhi"></span>
                                <span class="sp-text">个人设置</span>
                            </div>
                            <div class="self-out">
                                <span class="iconfont icon-tuichu"></span>
                                <span class="sp-text">退出</span>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="m-create-center">创作者中心</a>
                <div class="m-search">
                    <div class="searchbg">
                        <span class="parent">
                            <input type="text" class="txt" placeholder="音乐/视频/电台/用户">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-subtop">
            <div class="ms-set">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <em class="bg">推荐</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <em>排行榜</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <em>歌单
                                <span class="f-icon">&nbsp;</span>
                            </em>

                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <em>主播电台</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <em>歌手</em>
                        </a>
                    </li>
                    <li>
                        <a href="newsong.html">
                            <em>新碟上架</em>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </header>
    <!-- 主页轮播图模块 -->
    <div class="totalmiddle">
        <div class="w">
            <div class="box">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="iconfont icon-zuohua left"></a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="iconfont icon-youhua right"></a>
                <!-- 轮播图片 -->
                <ul class="imgs">
                    <li class="one">
                        <a href="#"><img id="one" src="../upload/focus1.jpg" alt=""></a>
                    </li>
                    <li class="two">
                        <a href="#"><img src="../upload/focus2.jpg" alt=""></a>
                    </li>
                    <li class="three">
                        <a href="#"><img src="../upload/focus3.jpg" alt=""></a>
                    </li>
                    <li class="four">
                        <a href="#"><img src="../upload/focus4.jpg" alt=""></a>
                    </li>
                    <li class="five">
                        <a href="#"><img src="../upload/focus5.jpg" alt=""></a>
                    </li>
                    <li class="six">
                        <a href="#"><img src="../upload/focus6.jpg" alt=""></a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ul class="list">
                </ul>
                <!-- 两个空盒子，实现左右两侧图片点击效果 -->
                <div class="rights"></div>
                <div class="lefts"></div>

            </div>
        </div>
        <!-- 主体模块 -->
        <div class="main">
            <div class="main-l">
                <div class="m-l-top">
                    <div class="top-nav">
                        <div class="title">
                            <span class="top-nav-logo"></span>
                            <a class="top-nav-l" href="javascript:;">热门推荐</a>
                            <span></span>
                        </div>

                    </div>
                    <div class="subtitle">
                        <div class="top-nav-m">
                            <a class="ft-u" hidefocus="true" href="javascript:;">华语</a>

                            <a class="ft-u" hidefocus="true" href="javascript:;">流行</a>

                            <a class="ft-u" hidefocus="true" href="javascript:;">摇滚</a>

                            <a class="ft-u" hidefocus="true" href="javascript:;">民谣</a>

                            <a class="ft-u" hidefocus="true" href="javascript:;">电子</a>
                        </div>
                        <div class="top-nav-r ft-u">
                            <a hidefocus="true" href="javascript:;">更多</a>
                            <i class="more-logo">&nbsp;</i>
                        </div>
                    </div>
                    <div class="top-main">
                        <ul class="top-main-news">
                            <li>
                                <div class="news-a">
                                    <img src="../upload/hot1.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a class="ft-u" hidefocus="true" href="javascript:;">2021全网最火超好听热门歌曲</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot2.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">各种dj各种国度各种风情各种硬曲持续更新</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot3.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="#">
                                        “原来执着太久的东西本就失去了意义”</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot4.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">下午三点适合想念，傍晚六点适合见面</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot5.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">
                                        纵使黑夜吞噬了一切，太阳还可以重新回来</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot6.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">按自己的方式，过自己的生活</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot7.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">最感慨丨为护“儿子”进监狱，服刑期间发现竟非亲生</a>
                                </p>
                            </li>
                            <li>
                                <div class="news-a">

                                    <img src="../upload/hot8.jpg" alt="news">
                                    <div class="img-buttom">
                                        <span class="img-buttom-l"></span>
                                        <span class="img-buttom-m">618万</span>
                                        <a class="img-buttom-r" hidefous="true" href="javascript:;"></a>
                                    </div>
                                </div>
                                <p>
                                    <a hidefocus="true" href="javascript:;">童话 偷米</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-l-middle">
                    <div class="top-nav">
                        <span class="top-nav-logo"></span>
                        <a class="top-nav-l" href="javascript:;">新碟上架</a>

                    </div>
                    <div class="top-nav-r">
                        <a hidefocus="true" href="javascript:;">更多</a>
                        <i class="more-logo">&nbsp;</i>
                    </div>
                    <div class="middle-main">
                        <div class="m-inner">
                            <a class="click-flag-l" hidefocus="true" href="javascript:;">&nbsp;</a>
                            <div class="roll-imgs">
                                <ul class="roll-img1">
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong1.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">Afterglow</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">RADWIMPS</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong2.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">DIGI¹</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">郭顶</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong3.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">I NEVER DIE</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">(G)I-DLE</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong4.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">SNTS</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">马思唯</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong5.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">As It Was</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">Harry Styles</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul class="roll-img2">
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong6.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">When You're Gone</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">Shawn Mendes</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong7.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">华北浪革</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">刘森</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong8.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">春夏秋冬</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">张国荣</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong9.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">苦茶子</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">重何</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong10.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">余年</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">十太</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul class="roll-img3">
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong11.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">Lie</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">w8y</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong12.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">飞花</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">刘莉旻</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong13.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">Stay The Night</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">Goose house</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong14.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">每当我</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">刘诗人</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong15.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">好不容易</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">告五人</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul class="roll-img4">
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong1.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">Afterglow</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">RADWIMPS</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong2.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">DIGI¹</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">郭顶</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong3.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">I NEVER DIE</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">(G)I-DLE</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong4.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">SNTS</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">马思唯</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="cover-record">
                                            <img src="../upload/newsong5.jpg" alt="img">
                                            <a class="record" hidefocus="true" href="javascript:;"></a>
                                            <a class="play-record" hidefocus="true" href="javascript:;"></a>
                                        </div>
                                        <p class="song-title">
                                            <a hidefocus="true" href="javascript:;">As It Was</a>
                                        </p>
                                        <p class="songer">
                                            <a hidefocus="true" href="javascript:;">Harry Styles</a>
                                        </p>
                                    </li>

                                </ul>
                            </div>
                            <a class="click-flag-r" hidefocus="true" href="javascript:;">&nbsp;</a>
                        </div>
                    </div>
                </div>
                <div class="m-l-bottom">
                    <div class="top-nav">
                        <span class="top-nav-logo"></span>
                        <a class="top-nav-l" href="javascript:;">榜单</a>

                    </div>
                    <div class="top-nav-r">
                        <a hidefocus="true" href="javascript:;">更多</a>
                        <i class="more-logo">&nbsp;</i>
                    </div>

                    <div class="b-content">
                        <div class="bc bc-1">
                            <i class="toplist-play"></i>
                            <i class="toplist-line"></i>
                            <h3 class="toplist-title">
                                <div class="top-title">
                                    <i>巅</i><i>峰</i><i>榜</i>
                                </div>
                                <a href="#">热歌</a>
                            </h3>
                            <ul class="toplist-song">
                                <li>
                                    <div class="toplist-num">1</div>
                                    <div class="toplist-songname">
                                        <a href="#">爱丫爱丫</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">BY2</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">2</div>
                                    <div class="toplist-songname">
                                        <a href="#">孤勇者</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">陈奕迅</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">3</div>
                                    <div class="toplist-songname">
                                        <a href="#">美人鱼</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">BY2</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="bc bc-2">
                            <i class="toplist-play"></i>
                            <i class="toplist-line"></i>
                            <h3 class="toplist-title">
                                <div class="top-title">
                                    <i>巅</i><i>峰</i><i>榜</i>
                                </div>
                                <a href="#">新歌</a>
                            </h3>
                            <ul class="toplist-song">
                                <li>
                                    <div class="toplist-num">1</div>
                                    <div class="toplist-songname">
                                        <a href="#">爱丫爱丫</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">李浩然</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">2</div>
                                    <div class="toplist-songname">
                                        <a href="#">就忘了吧</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">LK</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">3</div>
                                    <div class="toplist-songname">
                                        <a href="#">春泥（女版）</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">旺仔小乔</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="bc bc-3">
                            <i class="toplist-play"></i>
                            <i class="toplist-line"></i>
                            <h3 class="toplist-title">
                                <div class="top-title">
                                    <i>巅</i><i>峰</i><i>榜</i>
                                </div>
                                <a href="#">流行指数</a>
                            </h3>
                            <ul class="toplist-song">
                                <li>
                                    <div class="toplist-num">1</div>
                                    <div class="toplist-songname">
                                        <a href="#">晚风心里吹</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">阿梨粤</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">2</div>
                                    <div class="toplist-songname">
                                        <a href="#">最美的瞬间</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">真瑞</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="toplist-num">3</div>
                                    <div class="toplist-songname">
                                        <a href="#">就忘了吧</a>
                                    </div>
                                    <div class="toplist-artist">
                                        <a href="#">Lk</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <div class="main-r">
                <div class="mr-top">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a hidefocus="true" href="javascript:;">用户登录</a>
                </div>
                <div class="mr-middle">
                    <h3>
                        <span>入驻歌手</span>
                        <a hidefocus="true" href="javascript:;">查看全部></a>
                    </h3>
                    <ul class="clearfix">
                        <li>
                            <img src="../upload/singer1.jpg" alt="Fine乐队">
                            <div class="li-content">
                                <h4>
                                    <span>张惠妹aMEl</span>
                                </h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/singer2.jpg" alt="Fine乐队">
                            <div class="li-content">
                                <h4>
                                    <span>Fine乐队</span>
                                </h4>
                                <p>独立创作人</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/singer3.jpg" alt="萬曉利">
                            <div class="li-content">
                                <h4>
                                    <span>萬曉利</span>
                                </h4>
                                <p>民谣歌手、中国现代民谣的代表人物之一</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/singer4.jpg" alt="音乐人赵雷">
                            <div class="li-content">
                                <h4>
                                    <span>音乐人赵雷</span>
                                </h4>
                                <p>民谣歌手、中国现代民谣的代表人物之一</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/singer5.jpg" alt="王三溥">
                            <div class="li-content">
                                <h4>
                                    <span>王三溥</span>
                                </h4>
                                <p>音乐人</p>
                            </div>
                        </li>
                    </ul>
                    <div class="ask">
                        <a class="a-content" hidefocus="true" href="javascript:;">
                            <i>申请成为网易音乐人</i>
                        </a>
                    </div>
                </div>
                <div class="mr-bottom">
                    <h3>热门主播</h3>
                    <ul>
                        <li>
                            <img src="../upload/hotdj1.jpg" alt="陈立">
                            <div class="lc">
                                <h4>
                                    <span class=".ft-u">陈立</span>
                                </h4>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/hotdj2.jpg" alt="刘维-Julius">
                            <div class="lc">
                                <h4>
                                    <span class=".ft-u">刘维-Julius</span>
                                </h4>
                                <p>歌手、播客节目《维维道来》主理人</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/hotdj3.jpg" alt="莫非定律">
                            <div class="lc">
                                <h4>
                                    <span class=".ft-u">莫非定律MoreFeel</span>
                                </h4>
                                <p>男女双人全创作独立乐团</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/hotdj4.jpg" alt="碎嘴许美达">
                            <div class="lc">
                                <h4>
                                    <span class=".ft-u">碎嘴许美达</span>
                                </h4>
                                <p>脱口秀网络红人</p>
                            </div>
                        </li>
                        <li>
                            <img src="../upload/hotdj5.jpg" alt="银临Rachel">
                            <div class="lc">
                                <h4>
                                    <span class=".ft-u">银临Rachel</span>
                                </h4>
                                <p>古风音乐人</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 尾部 -->
        <footer class="g-ft">
            <div class="g-ft-set">
                <div class="l-ft">
                    <div class="links">
                        <a href="javascript:;">服务条款</a>
                        <span class="line">|</span>
                        <a href="javascript:;">隐私政策</a>
                        <span class="line">|</span>
                        <a href="javascript:;">儿童隐私政策</a>
                        <span class="line">|</span>
                        <a href="javascript:;">版权投诉指引</a>
                        <span class="line">|</span>
                        <a href="javascript:;">联系我们</a>
                        <span class="line">|</span>
                        <a href="javascript:;">广告合作</a>
                        <span class="line">|</span>
                        <a href="javascript:;">廉正举报</a>

                    </div>
                    <div class="sup-copyright">
                        <span>网易公司版权所有©1997-2021</span>
                        <a href="javascript:;">杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</a>
                    </div>
                    <div class="sub-copyright">
                        <a href="javascript:;">粤B2-20090191-18 &nbsp工业和信息化部备案管理系统网站&nbsp&nbsp</a>
                        <a href="javascript:;" class="police">
                            <span class="police-logo">&nbsp;</span>
                            <span class="police-text">浙公网安备 33010902002564号</span>
                        </a>
                    </div>
                </div>
                <ul class="r-ft">
                    <li>
                        <a href="javasript:;" class="newlogo a-studio"></a>
                        <span class="text t-as"></span>
                    </li>
                    <li>
                        <a href="javasript:;" class="newlogo id"></a>
                        <span class="text t-id"></span>
                    </li>
                    <li>
                        <a href="javasript:;" class="newlogo musician"></a>
                        <span class="text t-musician"></span>
                    </li>
                    <li>
                        <a href="javasript:;" class="newlogo reward"></a>
                        <span class="text t-reward"></span>
                    </li>
                    <li>
                        <a href="javasript:;" class="newlogo video"></a>
                        <span class="text t-video"></span>
                    </li>
                </ul>
            </div>

        </footer>
    </div>
    <!-- 页面中的音乐播放条 -->
    <div class="g-player">
        <div class="m-player">
            <div class="bg"></div>
            <div class="r-key">
                <div class="key">
                    <a href="javascript:;" class="icon-key">
                    </a>
                </div>
            </div>
            <div class="hand" title="展开播放条"></div>
            <div class="content">
                <div class="player-btns">
                    <a class="last" href="javascript:;" title="上一首(ctrl+←)"></a>
                    <a class="start" href="javascript:;" title="播放/暂停(p)"></a>
                    <a class="next" href="javascript:;" title="下一首(ctrl+→)"></a>
                </div>
                <div class="player-img">
                    <img src="../images/default_album.jpg" alt="">
                    <a href="javascript:;"></a>
                </div>
                <div class="player-line">
                    <div class="song-name">
                        <a class="name"></a>
                        <a class="singer"></a>
                    </div>
                    <div class="line">
                        <div class="r">
                            <div class="progress"></div>
                            <div class="btn-box">
                                <span class="btn"></span>
                            </div>
                        </div>
                        <span class="time">
                            <em class="song-time">00:00</em>
                            <em class="song-length">/ 00:00</em>
                        </span>
                    </div>
                </div>
                <div class="player-oper">
                    <a href="javascript" class="icon lyr" title="画中画歌词"></a>
                    <a href="javascript" class="icon add" title="收藏"></a>
                    <a href="javascript" class="icon share" title="分享"></a>
                </div>
                <div class="player-ctrl">
                    <a href="javascript:;" class="icon vol"></a>
                    <a href="javascript:;" class="icon loop" title="循环"></a>
                    <span class="list">
                        <a href="javascript:;" class="icon icon-list" title="播放列表"></a>
                    </span>
                </div>
            </div>

        </div>
        <div class="g-subplayer done">
            <div class="gs-title">
                <div class="gs-left">
                    <div class="gst-left">
                        <span>播放列表</span>
                        <span></span>
                    </div>
                    <div class="gst-right">
                        <span class="gst-collect">收藏全部</span>
                        <span class="gst-delete">删除</span>
                    </div>
                </div>
                <div class="gs-right">
                    <span class="gsr-title">
                        hello
                    </span>
                </div>
                <span class="gs-close">×</span>
            </div>
            <div class="gs-bottom">
                <div class="gsb-left">
                    <ul>
                    </ul>
                </div>
                <div class="gsb-right">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>
        <!-- 显示歌单列表的盒子 -->

    </div>
    <!-- 页面中的反馈、返回顶部 -->
    <div>
        <a href="javascript:;" class="play">
            <img src="../images/qr.png" alt="">
            <div class="code">
                <img src="../images/QRcode" alt="">
                <p>扫描二维码下载</p>
            </div>
        </a>
        <a href="javascript:;" class="topback iconfont icon-shanghua"></a>
        <a href="javascript:;" class="feedback">反馈</a>
    </div>
    <!-- 登录模块 -->
    <div class="loading-off loading">
        <div class="loading-content">
            <div class="mask"></div>
            <div class="loading-box">
                <div class="loading-message">
                    <div class="loading-close"><span class="close">×</span></div>
                    <div class="loading-top">
                        <a href="javascript:;" class="top-phone loading-red">手机登录
                            <span class="tab-line tab-phone-line"></span>
                        </a>
                        <a href="javascript:;" class="top-code">二维码登陆
                            <span class="tab-line tab-code-line line-off"></span>
                        </a>
                    </div>
                    <div class="loading-middle ">
                        <div class="lm-top">
                            <span class="verify"></span>
                            <div class="lm-top-left">
                                <span>中国大陆 +86</span>
                                <span class="iconfont icon-xiala"></span>
                            </div>
                            <div class="lm-top-right">
                                <input class="phone-number" type="text" placeholder="请输入手机号">
                            </div>
                        </div>
                        <div class="lm-middle">
                            <span class="verify-psw"></span>
                            <input class="psw" type="password" placeholder="请输入密码">
                            <span class="eye iconfont icon-yanjing_yincang"></span>

                        </div>
                        <div class="lm-botton">
                            <a href="javascript:;">登录</a>

                        </div>
                        <div class="lm-subbotton">
                            <div class="agreement-link">
                                <input class="check" type="checkbox">
                                <label for="argree">同意</label>
                                <a href="http://st.music.163.com/official-terms/service">《服务条款》</a>
                                <a href="http://st.music.163.com/official-terms/privacy">《隐私条款》</a>
                                <a href="https://st.music.163.com/official-terms/children">《儿童隐私政策》</a>
                            </div>
                        </div>
                    </div>
                    <div class="loading-middle-code lm-middle-off">
                        <img src="../images/app-code.png" alt="">
                        <div class="app-qgcode">
                            <img src="../images/QRcode" alt="">
                            <span>使用<a href="#">网易云APP</a>扫码登录 </span>
                        </div>
                    </div>
                    <div class="loading-botton">
                        <div class="other">其他方式登录</div>
                        <div class="other-icon">
                            <span class="iconfont icon-weixin"></span>
                            <span class="iconfont icon-QQ1"></span>
                            <span class="iconfont icon-weibo1"></span>
                            <span class="iconfont icon-wangyi"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 没有勾选同意的盒子 -->
            <div class="disagree loading-off">
                <span>请先勾选同意《服务条款》、《隐私条款》、《儿童隐私政策》</span>
            </div>
        </div>
    </div>
    <iframe id="ifSong" class="index" src="songlist.html" frameborder="0"></iframe>
    <iframe id="iferror" class="index" src="error-mymusic.html" frameborder="0"></iframe>
    <iframe id="ifsuccess" class="index" src="success-mymusic.html" frameborder="0"></iframe>
    <iframe id="ifperson" class="index" src="personchange.html" frameborder="0"></iframe>
    <iframe id="ifsearch" class="index" src="search.html" frameborder="0"></iframe>
</body>

</html>